<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p>
    <input id="user" type="text">
    <span id="user_span"></span>
  </p>
  <p><input type="button" id="btn" value="注册"></p>
</body>
<script>
  // 用户名注册验证要求
  // 由数字 大小写字母 下划线 组成 6-12位, 且不能以数字开头 不能含有非法字符

  // 1. 由数字 大小写字母 下划线 组成(不能含有非法字符)
  // 2. 6-12位
  // 3. 不能以数字开头

  // 按照从易到难的顺序
  // a. 6-12位
  // b. 验证开头(不能以数字开头)


  // 非法字符(数字 大小写字母 下划线 以外的字符)

  // 1. JS操作元素之前必须先获取元素
  var userInp = document.getElementById("user");
  var userSpan = document.getElementById("user_span");
  var btn = document.getElementById("btn");

  // 2. 绑定点击事件  =>
  btn.onclick = function () {
    // 3. 点击取值  => 去除首尾空格
    var user = userInp.value.trim();
    console.log(1, user);


  }


  //  innerText   获取和设置非表单元素(div span ul)的文本内容
  //  innerHTML   获取和设置非表单元素的html结构

  // JS操作元素改变样式时,都是通过内联style实现的






</script>

</html>